<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BootStrap+AngularJS分页显示 </title>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
		<script type="text/javascript" src="../js/angular.min.js"></script>
	</head>

	<body ng-app="myapp" ng-controller="myctrl">
		<div>
			<table class="table table-bordered">
				<tr>
					<th>序号</th>
					<th>商品编号</th>
					<th>名称</th>
					<th>价格</th>
				</tr>
				<tr ng-repeat="product in products">
					<td>{{$index+1}}</td>
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
			</table>
			<div>
				<ul class="pagination pull-right">
					<li>
						<a href ng-click="prev()">上一页</a>
					</li>
					<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
						<a href ng-click="selectPage(page)">{{page}}</a>
					</li>
					<li>
						<a href ng-click="next()">下一页</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = angular.module("myapp", []);
		app.controller("myctrl",["$scope", "$http", function($scope, $http) {
			 var curragepage = 1;
			var pagesize = 4;
			var totalpage = 0;
			var totalcount = 0;
			$scope.pageList = new Array();
			// 加载上一页数据
			$scope.prev = function() {
				$scope.selectPage($scope.curragepage - 1);
			}

			// 加载下一页数据 
			$scope.next = function() {
				$scope.selectPage($scope.curragepage + 1);
			}
			//加载选中页
			$scope.selectPage = function(page) {
				//页码不在范围
				if($scope.totalpage != 0 && (page < 1 || page > $scope.totalpage)) {
					return;
				}
				//发送请求
				$http({
					mothod: 'GET',
					url: "6_" + page + ".json",
					params: {
						page: page,
						pagesize: $scope.pagesize
					}
				}).success(function(data, status, headers, config) {
					$scope.products = data.products;
					$scope.totalcount = data.totalCount;
					$scope.totalpage = Math.ceil($scope.totalcount / $scope.pagesize);
					$scope.curragepage = page;
					/*	定义开始  结束*/
					var begin;
					var end;
					begin = $scope.curragepage - 5;
					if(begin < 1) {
						begin = 1;
					}
					end = begin + 9;
					if(end > $scope.totalpage) {
						end = $scope.totalpage;
					}
					begin = end - 9;
					if(begin < 1) {
						begin = 1;
					}
					// 将页码加入 PageList集合
					for(var i = begin; i <= end; i++) {
						$scope.pageList.push(i);
					}

				}).error(function(data, status, headers, config) {
					alert("出错，请联系管理员。。。。")
				});

			}

			// 判断是否为当前页 
			$scope.isActivePage = function(page) {
				return page === $scope.currentPage;
			}

			// 初始化，选中第一页
			$scope.selectPage(1);

		}]);
	</script>

</html>